<template>
	<view>
		<u-modal v-model="modalShow" width="70%" :title="title" :title-style="titleStyle" :confirm-color="'#B3723E'" :content-style="contentStyle" :confirm-text="text" :cancel-text="cancel_text" :show-cancel-button="show_cancel" :show-confirm-button="show_confirm" :mask-close-able="maskCloseAble" :content="content" @cancel="cancel" @confirm="confirm" @modeClose="modeClose">
		</u-modal>
	</view>
</template>

<script>
	export default{
		props: {
			/* 确认按钮文字 */
			confirmText:{
				type: String,
				default: '确定'
			},
			/* 显示隐藏 */
			show: {
				type: Boolean,
				default: false
			},
			/* 内容 */
			modalContent: {
				type: String
			},
			/* 是否展示左侧按钮 */
			showCancel:{
				type: Boolean,
				default: true
			},
			/* 是否展示右侧按钮 */
			showConfirm:{
				type: Boolean,
				default: true
			},
			/* 左侧文字 */
			cancelText: {
				type: String
			},
			/* 遮罩是否可点击 */
			maskAble: {
				type: Boolean,
				default: false
			},
			/* head提示 */
			modalTitle: {
				type: String,
				default: '温馨提示'
			}
		},
		data(){
			return{
				modalShow: this.show,
				text: this.confirmText,
				cancel_text: '取消',
				show_cancel: true,
				show_confirm: true,
				title:this.modalTitle,
				content: '部分功能需注册解锁，注册后即可体验完整服务',
				titleStyle:{
					color: '#B3723E',
					fontSize: '40rpx',
					fontWeight: 'bold'
				},
				contentStyle: {
					padding: '30rpx 48rpx',
					fontSize: '28rpx'
				},
				maskCloseAble: this.maskAble
			}
		},
		watch:{
			show:{
				deep: true,
				handler(newValue){
					this.modalShow = newValue
				}
			},
			confirmText:{
				deep: true,
				handler(newValue){
					this.text = newValue
				}
			},
			modalContent:{
				deep: true,
				handler(newValue){
					this.content = newValue
				}
			},
			cancelText:{
				deep: true,
				handler(newValue){
					this.cancel_text = newValue
				}
			},
			maskAble:{
				deep: true,
				handler(newValue){
					this.maskCloseAble = newValue
				}
			},
			showCancel:{
				deep: true,
				handler(newValue){
					this.show_cancel = newValue
				}
			},
			showConfirm:{
				deep: true,
				handler(newValue){
					this.show_confirm = newValue
				}
			},
			modalTitle:{
				deep: true,
				handler(newValue){
					this.title = newValue
				}
			},
		},
		methods:{
			cancel(){
				this.$emit("cancel")
			},
			confirm(){
				this.$emit("confirm")
			},
			modeClose(){
				this.$emit("modeClose")
			}
		}
	}
</script>

<style>
</style>